@extends('admin.common.admin')

@section('cnt')
    {{-- 面包屑导航 --}}
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 房东管理
        <span class="c-gray en">&gt;</span> 添加房东
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="page-container">
        {{-- 消息提示 --}}
        @include('admin.common.msg')

        <form class="form form-horizontal" id="addform" method="post" action="{{ route('admin.fangowner.store') }}">
            @csrf
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>房东姓名：</label>
                <div class="formControls col-sm-10">
                    <input type="text" autocomplete="off" class="input-text" value="{{ old('name') }}" name="name">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label  col-sm-2"><span class="c-red">*</span>性别：</label>
                <div class="formControls  col-sm-9 skin-minimal">
                    <div class="radio-box">
                        <input name="sex" type="radio" value="男" checked>
                        <label for="sex-1">男</label>
                    </div>
                    <div class="radio-box">
                        <input type="radio" id="sex-2" value="女" name="gender">
                        <label for="sex-2">女</label>
                    </div>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>房东年龄：</label>
                <div class="formControls col-sm-10">
                    <input type="text" autocomplete="off" class="input-text" value="{{ old('age') }}" name="age">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>房东电话：</label>
                <div class="formControls col-sm-10">
                    <input type="text" autocomplete="off" class="input-text" value="{{ old('phone') }}" name="phone">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>房东邮箱：</label>
                <div class="formControls col-sm-10">
                    <input type="text" autocomplete="off" class="input-text" value="{{ old('email') }}" name="email">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>身份证号码：</label>
                <div class="formControls col-sm-10">
                    <input type="text" autocomplete="off" class="input-text" value="{{ old('card') }}" name="card">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>房东地址：</label>
                <div class="formControls col-sm-10">
                    <input type="text" autocomplete="off" class="input-text" value="{{ old('address') }}" name="address">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>身份证照：</label>
                <div class="formControls col-sm-10">
                    <div id="picker">选择图标</div>
                    <input type="hidden" name="pic" id="pic">
                    <div class="showpic">

                    </div>
                </div>
            </div>
            <div class="row cl">
                <div class="col-sm-10 col-sm-offset-2">
                    <input class="btn btn-primary radius" type="submit" value="添加房东">
                </div>
            </div>
        </form>
    </article>
@endsection
@section('css')
    <link rel="stylesheet" href="/admin/lib/webuploader/0.1.5/webuploader.css"/>
    <style>
        .showpic{
            display: inline-block;
        }
    </style>
@endsection
@section('js')
    {{--富文本js引入--}}
    <script src="/admin/lib/ueditor/1.4.3/ueditor.config.js"></script>
    <script src="/admin/lib/ueditor/1.4.3/ueditor.all.min.js"></script>
    <script src="/admin/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
    {{--异步文件上传插件js--}}
    <script src="/admin/lib/webuploader/0.1.5/webuploader.min.js"></script>
    <script>
        // 用于csrf验证的
        const TOKEN = "{{ csrf_token() }}";
        // 异步文件上传 发起POST请求 post触发csrf验证
        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传
            auto: true,
            // swf文件路径
            swf: '/admin/lib/webuploader/0.1.5/Uploader.swf',
            // 上传文件处理的后台路由
            server: "{{ route('admin.fangowner.upfile') }}",
            // 选择文件的按钮。可选。
            pick: '#picker',
            // 额外参数
            formData: {
                _token: TOKEN,
                node:"fangowner"
            },
            // 表单域名称
            fileVal: 'file',
            // 压缩
            resize: true,
            // 只上传图片
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        // 回调方法 上传成功后完成的方法
        uploader.on('uploadSuccess', function (file, response) {
            // 隐藏域字符串追加
            let val=$('#pic').val();
            val +='#'+response.pic;
            $('#pic').val(val);
            let html=`<img src="${response.pic}" style="width:100px;">`;
            $('.showpic').append(html);
        });
        // 表单验证
        $("#addform").validate({
            // 验证规则
            rules: {
                name: {
                    required: true
                }
            },
            // 取消回车事件
            onkeyup: false,
            // 验证成功时的样式名称
            success: "valid",
            // 验证成功后，回调事件  form dom对象
            submitHandler: function (form) {
                // js 表单提交
                form.submit();
            }
        });
    </script>
@endsection

